<template>
  <el-dialog
      v-loading="loading"
      v-model="dialog.visible"
      width="80%"
      :close-on-click-modal="false"
      :title="dialog.title+selectTaskName"
      :before-close="closeDialog"
  >
    <el-container>
      <el-aside width="300px">
        <el-divider content-position="center">流程节点</el-divider>
        <el-tree ref="taskTree" :data="tasks"
                 nodeKey="defKey"
                 :props="{label:'defName'}"
                 :highlight-current="true"
                 @node-click="taskNodeClick">
        </el-tree>
      </el-aside>
      <el-main class="margin-left">
        <el-divider content-position="center">表单配置</el-divider>
        <edit-model-form-prop v-if="selectNodeDefKey" :form-items="formItems"
                              v-model="taskFormProp[selectNodeDefKey]">
          <template #menuBar>
            <el-button @click="openCopyDialog">复制到其他流程节点</el-button>
          </template>
        </edit-model-form-prop>
      </el-main>
    </el-container>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button @click="submit" type="primary">保存全部</el-button>
      </div>
    </template>


    <el-dialog v-model="copyDialog.visible"
               width="400"
               :title="copyDialog.title"
               destroy-on-close>
      <div style="height: 500px;overflow-y: auto">
        <el-tree ref="taskTreeCopy"
                 :data="copyDialog.tasks"
                 nodeKey="defKey"
                 :props="{label:'defName'}"
                 :show-checkbox="true"
                 :highlight-current="true"
        >
        </el-tree>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="copyDialog.visible=false">取 消</el-button>
          <el-button @click="submitCopyConfig" type="primary">复制</el-button>
        </div>
      </template>

    </el-dialog>
  </el-dialog>
</template>
<script>
import EditModelFormProp from "@/views/start/activiti/model/editModelFormProp.vue";
import {deepClone} from "utils/util";

export default {
  name: "editModelFormPropDialog",
  components: {EditModelFormProp},
  props: {
    getTasks: {
      type: Function,
      required: true,
    },
    getFormPropConfig: {
      type: Function,
      required: true,
    },
    saveFormPropConfig: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      copyDialog: {
        title: "",
        visible: false,
        tasks: []
      },
      dialog: {
        title: "",
        visible: false
      },
      tasks: [],
      formItems: [],
      taskFormProp: {},
      selectNodeDefKey: null,
      selectNodeDefName: null,
      id: null,
      loading: false,
      selectTaskName: '',

    }
  },
  created() {

  },
  methods: {
    show(row, title) {
      this.id = row.id;
      this.dialog.visible = true;
      this.dialog.title = title
      this.loading = true
      this.getTasks(row.id).then(res => {
        this.tasks = res.data.data || []
        return this.getFormPropConfig(row.id)
      }).then(res => {
        let data = res.data.data;
        this.taskFormProp = data.formPropMap || {}
        this.formItems = data.formItems
        if (this.tasks.length < 1) {
          return
        }
        this.$nextTick(() => {
          this.$refs.taskTree.setCurrentKey(this.tasks[0].defKey)
          this.taskNodeClick(this.tasks[0])
        })


      }).finally(() => this.loading = false)
    },
    taskNodeClick(node) {
      this.selectTaskName = "-" + node.defName
      this.selectNodeDefKey = node.defKey
      this.selectNodeDefName = node.defName
    },
    submit() {
      this.loading = true
      this.saveFormPropConfig(this.id, deepClone(this.taskFormProp)).then(res => {
        this.$message.success("保存成功")
        this.closeDialog()
      }).catch(err => {

      }).finally(() => this.loading = false)
    },
    openCopyDialog() {
      let tasks = deepClone(this.tasks)
      for (const task of tasks) {
        task.disabled = task.defKey === this.selectNodeDefKey
      }
      this.copyDialog.tasks = tasks;
      this.copyDialog.title = "复制【" + this.selectNodeDefName + "】节点表单配置"
      this.copyDialog.visible = true;
    },
    submitCopyConfig() {
      let selectedTasks = this.$refs.taskTreeCopy.getCheckedNodes();
      let message = "您确定要将节点【" + this.selectTaskName + "】的表单配置应用到您勾选的节点\n："
      message += selectedTasks.map(e => e.taskDefName).join(",") + "上去吗?"
      let selectFormProps = deepClone(this.taskFormProp[this.selectNodeDefKey]);
      this.$confirm(message, "系统提示").then(res => {
        for (const task of selectedTasks) {
          this.taskFormProp[task.taskDefKey] = deepClone(selectFormProps)
        }
        this.copyDialog.tasks = [];
        this.copyDialog.title = ""
        this.copyDialog.visible = false
        this.$message.success("应用成功，请记得保存哟！")
      }).catch(err => {

      })
    },
    closeDialog() {
      this.dialog.visible = false;
      this.dialog.title = ""
      this.tasks = []
      this.formItems = []
      this.taskFormProp = {}
      this.selectNodeDefKey = null
      this.id = null;
    }
  },
}
</script>
<style scoped>

</style>